<template>
  <view class="ve-cell" :class="{ 've-cell-vertical': layout == 'vertical' }">
    <view class="ve-cell-title">
      {{ label }}
      <slot name="label"></slot>
    </view>
    <view class="ve-cell-content overflow-ellipsis" :style="{ textAlign: priceAlign }">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  /**
   * ve-cell 单元格
   * @property {String} label 标题
   * @example <ve-cell icon="emoji" title="用户名" value="大哥" isLink></ve-cell>
   */
  export default {
    name: 've-cell',
    props: {
      label: String,
      value: String,
      layout: {
        type: String,
        default: 'horizontal', // horizontal | vertical
      },
      priceAlign: {
        type: String,
        default: 'left',
      },
    },
  }
</script>

<style lang="scss" scoped>
  // .overflow-ellipsis {
  // 	white-space: nowrap;
  // 	overflow: hidden;
  // 	text-overflow: ellipsis;
  // }

  .ve-cell {
    display: flex;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 44rpx;
    box-sizing: border-box;
    margin: 32rpx 0;

    &-title {
      width: 180rpx;
      max-width: 180rpx;
      color: rgba(132, 145, 168, 1);
      flex-shrink: 0;
      margin-right: 20rpx;
    }

    &-content {
      flex: 1;
      flex-shrink: 1;
      color: #191c27;
      display: flex;
      word-break: break-all;
    }
  }
  .ve-cell-vertical {
    display: block;
    .ve-cell-title {
      margin-right: 0;
      width: 100%;
      margin-bottom: 20rpx;
    }
    > .ve-cell-title {
      max-width: 100%;
    }

    .ve-cell-content {
      width: 100%;
      text-align: unset;
      display: block;
      word-break: break-all;
    }
  }
</style>
